/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  Text,
} from "customize-easy-ui-component";


/**报告封面的头部区域：
 * */
export const reportFirstPageHeadNQR= ({theme , rep, mbbm } :{theme: any, rep:any, mbbm:string}
) => {
  return <React.Fragment>
    <div css={{
      textAlign: "center",
      "& > div": {
        marginLeft: "auto",
        marginRight: "auto"
      },
      "@media (min-width:690px),print and (min-width:538px)": {
        display: "flex",
        justifyContent: "space-between",
        flexWrap: 'wrap',
        "& > div": {
          margin: theme.spaces.sm,
        }
      }
    }}
    >
      <div css={{overflow: 'hidden'}}>
      </div>
      <div>
        <Text variant="h6">{mbbm}</Text>
        <br/><br/>
        <Text variant="h6" css={{
          "@media (min-width:690px),print and (min-width:538px)": {
            marginRight: "1rem"
          }
        }}
        >报告编号：{rep?.isp?.no}
        </Text>
      </div>
    </div>
  </React.Fragment>;
};

export const 注意事项= ( {comply, rep} :{comply: string, rep:any}
) => {
  return <React.Fragment>
    <div css={{
      "@media print": {
        //【特殊】布局流如何定位到中间某一张纸张的末尾打印；纸张高度上 剪掉 上面的一行 “目录” 并没有被本div所都囊括的元素高度：推定剪掉高度是2rem。A4纸张竖版大约可接受高度大小=775pt再换算=273.4mm；A4纸297mm-2*(11.7=边距+页眉页脚)；
        //【有问题】目标div必须小于一张纸高度？这里若稍微超出了当前定位纸张区域，@@就可能被切分两页的！！，变成后续尾随空白页面的。所以尽量考虑有余量“- 10pt”:A4纸张竖版。
        height: `calc(100vh - 2rem - 10pt)`,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',   //'flex-end', 吸附本页纸张的底部区域打印，还是在本张纸张中间打印的？
      },
      margin: '0 3rem 0',
    }}>
      <Text variant="h3" css={{marginBottom: '3rem', textAlign: 'center'}}>注意事项</Text>
      <Text variant="h5" css={{lineHeight: 2,}}>
        <p>1．本报告是依据{comply}。</p>
        2．本报告应当由计算机打印输出，或者用钢笔、签字笔填写，字迹要工整，涂改无效。<br/>
        <p>3．本报告无检验、审核、批准人员签字以及检验机构的核准证号和检验专用章（或者公章）无效。</p>
        4．本报告一式二份，由检验机构和使用单位分别保存。<br/>
        <p>5．本报告对检验时的设备状况负责。</p>
        <p>6．报检电话：{rep?.isp?.ispu?.agency?.bjtel}，网址：{rep?.isp?.ispu?.agency?.bjurl}。</p>
      </Text>
    </div>
  </React.Fragment>;
};
